<template>
    <div class="all-list">
        <el-card class="container mt-5">
            <div slot="header" class="clearfix">
                <span><span class="card-header-box"></span>报名情况</span>
                <a href="javascript:;" class="list-button float-right p-1" @click="logout">登出</a>
                <a href="javascript:;" class="list-button float-right p-1 mr-3" @click="toEnrollSituation">查看结果</a>
            </div>
            <vue-table :data-source="tableList"  :queryString="queryModel">
                <template slot="header">
                    <tr>
                        <th scope="col">幼儿园名称</th>
                        <th scope="col">已报名人数</th>
                        <th scope="col">预计招生</th>
                    </tr>
                </template>
                <template slot="tbody" slot-scope="props">
                    <tr :class=" props.index % 2 == 0 ? 'table-row':''">
                        <td>{{props.item.school_name}}</td>
                        <td :class="props.item.registration_numbers > props.item.upper_limit ? 'colorRed' : ''">{{props.item.registration_numbers}}</td>
                        <td>{{props.item.upper_limit}}</td>
                    </tr>
                </template>
            </vue-table>
            <div class="col d-flex justify-content-center">
                <el-button type="primary" class="col-3 mt-3 mb-3" @click="toEntering">录入</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
  import ListDataSource from '../libs/ListDataSource.js'
  import DataApi from '../api/data'
  import Cookie from 'js-cookie';
  export default {
    data(){
      return{
        tableList: new ListDataSource('/api/situation-info'),
        queryModel:{}
      }
    },
    created () {
//      console.log(this)
      this.tableList.fetchData()
//      console.log(this.tableList)
    },
    methods: {
      toEnrollSituation(){
        this.tableList.fetchData()
      },
      toEntering(){
        this.$router.push({
          path: 'entering/' + 0,
        })
      },
      logout(){
        axios.post('/api/logout', {})
          .then(function (response) {
            Cookie.remove('user');
            window.location.reload();
          })
          .catch(function (error) {
            console.log(error);
          });
      },
    },
    mounted: function () {

    },
  }
</script>
